Gesture area widget

Path: Widget Gallery> Buttons> Others

Gesture Area Widget is a hotspot button that generates gesture events.

Gesture Events	Description
OnSwipeLeft OnSwipeRight	An event is release when swipe gesture is detected
OnPinchOpen OnPinchClose	An event is release when pinch gesture is detected
RotateClockwise RotateAntiClockwise	An event is release when rotate gesture is detected
OnPan OnPinch OnRotate	A series of events released during the gesture. Only JavaScript can be used to service these events, through the JavaScript code the developer can manage the gestures events as he prefer. WARNING: Only multi touch HMI devices can generate OnPinch and OnRotate events

OnPan

boolean onGesturePan(me, eventInfo)

This event occurs when one point inside the area has pressed and a linear movement has been detected.

Parameter Description

me Object triggering the event.

eventInfo

Parameter	Description
me	Object triggering the event.
eventInfo	id = Gesture id; it is used to identify different gestures. running = True except for last event delivered to notify gesture completion. dx = Total X axis movement in screen pixel units from initial touch position . dy = Total Y axis movement in screen pixel units from initial touch position.

id = Gesture id; it is used to identify different gestures.

running = True except for last event delivered to notify gesture completion.

dx = Total X axis movement in screen pixel units from initial touch position .

dy = Total Y axis movement in screen pixel units from initial touch position.

OnPinch

boolean onGesturePinch(me, eventInfo)

This event occurs when two points inside the area have been pressed and a linear movement has been detected.

Parameter Description

me Object triggering the event

eventInfo

Parameter	Description
me	Object triggering the event
eventInfo	id = Gesture id; it is used to identify different gestures. running = True except for last event delivered to notify gesture completion. dx = Total X axis movement in screen pixel units from initial touch position. It represents the distance change between fingers. Positive value means that the distance is increasing; negative value means that the distance is decreasing. This amount may be used to control a zoom value. dy = Total Y axis movement in screen pixel units (see dx).

id = Gesture id; it is used to identify different gestures.

running = True except for last event delivered to notify gesture completion.

dx = Total X axis movement in screen pixel units from initial touch position. It represents the distance change between fingers. Positive value means that the distance is increasing; negative value means that the distance is decreasing. This amount may be used to control a zoom value.

dy = Total Y axis movement in screen pixel units (see dx).

OnRotate

boolean onGestureRotate(me, eventInfo)

This event occurs when two points inside the area have been pressed and a rotate movement has been detected.

Parameter Description

me Object triggering the event

eventInfo

Parameter	Description
me	Object triggering the event
eventInfo	id = Gesture id; it is used to identify different gestures. running = True except for last event delivered to notify gesture completion. drot = How many degrees (0/360) have been added since the previous event. trot = Total degrees (0/360) of the entire movement. Positive numbers meaning clockwise rotation, negative anticlockwise rotation.

id = Gesture id; it is used to identify different gestures.

running = True except for last event delivered to notify gesture completion.

drot = How many degrees (0/360) have been added since the previous event.

trot = Total degrees (0/360) of the entire movement.

Positive numbers meaning clockwise rotation, negative anticlockwise rotation.

Gesture events pass thru

To use a widget (e.g. a button or a slider) covered from a gesture object, you have to keep pressed the widget 200 mSec to move the control to the underlying object. The time that must be waited for to send the command to the underlying object can be modified from the “Gesture Passthru Delay” parameter that is available in the advanced properties view.

Parameter Description

Gesture Passthru Enabled

Enable the possibility to pass gesture events to underlying widgets after a configurable delay. User has to keep pressed the finger and then execute the gesture.

default = Use the value defined in the project properties. See "Project"

true = Gesture passthru enabled

false = Gesture passthru disabled

Gesture Passthru Delay (ms)

The time that must be waited for to send the command to the underlying object

0/500	mSec
-1	Use the delay defined in the project properties. See "Project"

Examples of using gesture events in association with JavaScript

Here some example of using gesture events in association with JavaScript code to identify gestures and program the requested actions

Swipe Gesture

How to recognize a "swipe" gesture to change page in the application.

Put a Gesture area widget into the page
Configure the OnPan Action to trigger a JavaScript function
Write the JavaScript code that recognize and manage the swipe gesture

Pinch Gesture

How to recognize a "pinch" gesture to resize an image.

Put a Gesture area widget into the page over the image
Configure the OnPinch Action to trigger a JavaScript function
Write the JavaScript code that recognize and manage the pinch gesture

Pan Gesture

How to recognize a "pan" gesture to move an image.

Put a Gesture area widget into the page over the image
Configure the OnPan Action to trigger a JavaScript function
Write the JavaScript code that recognize and manage the pan gesture